<template>
  <GlobalDrawer
    v-model="visible"
    :title="formTitle"
    size="85%"
    :show-footer-buttons="true"
    @confirm="handleSubmit"
    :confirm-loading="submitting"
  >
    <div class="customer-form">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
        <el-row :gutter="20">
          <!-- 左侧主内容区 -->
          <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
            <!-- 基础信息卡片 -->
            <BasicInfoForm v-model="form" />

            <!-- 地址信息卡片 -->
            <AddressInfoForm :model-value="form" @change="handleFormChange" />

            <!-- 联系人信息卡片 -->
            <ContactInfoForm :model-value="form" @change="handleFormChange" />

            <!-- 证件信息卡片（所有客户类型） -->
            <CertificateInfoForm :model-value="form" @change="handleFormChange" />

            <!-- 企业信息卡片（企业客户时显示） -->
            <EnterpriseInfoForm
              v-if="form.customer_type === 2"
              :model-value="form"
              @change="handleFormChange"
            />

            <!-- 扩展信息卡片 -->
            <ExtendedInfoForm :model-value="form" @change="handleFormChange" />
          </el-col>

          <!-- 右侧侧边栏 -->
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <!-- 会员信息卡片 -->
            <MembershipInfoForm :model-value="form" @change="handleFormChange" />

            <!-- 营销信息卡片 -->
            <MarketingInfoForm :model-value="form" @change="handleFormChange" />

            <!-- 详情页时显示统计信息 -->
            <template v-if="props.customerId && isEditing">
              <StatisticsCard :data="detailData" />
              <TagsAndRemarkCard :data="detailData" />
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </GlobalDrawer>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { statusService } from '@/utils/statusService'
  import { customerApi } from '@/api/crm'
  import GlobalDrawer from '@/components/common/GlobalDrawer.vue'

  // 导入子组件
  import BasicInfoForm from './customer_form/BasicInfoForm.vue'
  import AddressInfoForm from './customer_form/AddressInfoForm.vue'
  import ContactInfoForm from './customer_form/ContactInfoForm.vue'
  import CertificateInfoForm from './customer_form/CertificateInfoForm.vue'
  import EnterpriseInfoForm from './customer_form/EnterpriseInfoForm.vue'
  import MembershipInfoForm from './customer_form/MembershipInfoForm.vue'
  import ExtendedInfoForm from './customer_form/ExtendedInfoForm.vue'
  import MarketingInfoForm from './customer_form/MarketingInfoForm.vue'
  import StatisticsCard from './customer_form/StatisticsCard.vue'
  import TagsAndRemarkCard from './customer_form/TagsAndRemarkCard.vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    customerId: {
      type: Number,
      default: 0,
    },
  })

  const emit = defineEmits(['update:modelValue', 'success'])

  const visible = computed({
    get: () => props.modelValue,
    set: value => emit('update:modelValue', value),
  })

  const formRef = ref()
  const loading = ref(false)
  const submitting = ref(false)
  const isEditing = computed(() => !!props.customerId)
  const formTitle = computed(() => (isEditing.value ? '编辑客户' : '新增客户'))

  // 表单数据类型
  interface CustomerForm {
    // ===== 基础信息组 =====
    name: string // 客户名称（必填）
    customer_type: number // 客户类型：1=个人，2=企业
    phone: string // 联系电话（必填）
    user_id: number // 负责人ID（必填）
    department_id: number // 部门ID
    source: string // 客户来源
    level: number // 客户等级
    important_level: number // 重要程度
    status: number // 客户状态

    // ===== 地址信息组 =====
    province: string // 省份（必填）
    city: string // 城市（必填）
    district: string // 区县（必填）
    address: string // 详细地址

    // ===== 联系人信息组 =====
    contact_name: string // 联系人姓名
    contact_phone: string // 联系电话
    email: string // 邮箱

    // ===== 企业信息组（企业客户） =====
    legal_person: string // 法定代表人
    id_type: number | null // 证件类型
    id_number: string // 证件号码
    industry: string // 行业
    scale: string // 企业规模

    // ===== 会员信息组 =====
    customer_attribute: number // 客户属性：1=普通，2=合作，3=会员
    customer_status: number // 会员状态：0=非会员，2=会员，20=过期会员
    member_type: number | null // 会员类型：1=普惠，2=标准，3=VIP
    member_start_time: number | null // 会员开始时间
    member_end_time: number | null // 会员结束时间
    is_main_account: number | null // 是否主账号
    main_account_id: number | null // 主账号ID

    // ===== 营销信息组 =====
    is_cooperation: number // 是否已合作
    cooperation_time: number // 合作时间

    // ===== 扩展信息组 =====
    customer_tags: string[] // 客户标签
    next_followup_plan: string // 下一步跟进计划
    remark: string // 备注
    lost_reason: string // 客户流失原因

    // 可选字段（兼容旧字段和扩展字段）
    id?: number // 编辑时使用的ID
    customer_tags_json?: string // 后端存储的标签JSON字符串

    [key: string]: any // 索引签名，允许动态添加属性
  }

  // 表单数据 - 使用ref包装reactive对象以支持v-model
  const form = ref<CustomerForm>({
    // ===== 基础信息组 =====
    name: '', // 客户名称（必填）
    customer_type: 2, // 客户类型：1=个人，2=企业
    phone: '', // 联系电话（必填）
    user_id: 0, // 负责人ID（必填）
    department_id: 0, // 部门ID
    source: '', // 客户来源
    level: 1, // 客户等级
    important_level: 1, // 重要程度
    status: 1, // 客户状态

    // ===== 地址信息组 =====
    province: '', // 省份（必填）
    city: '', // 城市（必填）
    district: '', // 区县（必填）
    address: '', // 详细地址

    // ===== 联系人信息组 =====
    contact_name: '', // 联系人姓名
    contact_phone: '', // 联系电话
    email: '', // 邮箱

    // ===== 企业信息组（企业客户） =====
    legal_person: '', // 法定代表人
    id_type: null, // 证件类型
    id_number: '', // 证件号码
    industry: '', // 行业
    scale: '', // 企业规模

    // ===== 会员信息组 =====
    customer_attribute: 1, // 客户属性：1=普通，2=合作，3=会员
    customer_status: 0, // 会员状态：0=非会员，2=会员，20=过期会员
    member_type: null, // 会员类型：1=普惠，2=标准，3=VIP
    member_start_time: null, // 会员开始时间
    member_end_time: null, // 会员结束时间
    is_main_account: null, // 是否主账号
    main_account_id: null, // 主账号ID

    // ===== 营销信息组 =====
    is_cooperation: 0, // 是否已合作
    cooperation_time: 0, // 合作时间

    // ===== 扩展信息组 =====
    customer_tags: [], // 客户标签
    next_followup_plan: '', // 下一步跟进计划
    remark: '', // 备注
    lost_reason: '', // 客户流失原因
  })

  // 详情数据（用于详情页展示统计信息）
  const detailData = ref<any>({})

  // 验证规则
  const rules = {
    // ===== 基础信息验证 =====
    name: [
      { required: true, message: '请输入客户名称', trigger: 'blur' },
      { min: 2, max: 255, message: '客户名称长度为2-255个字符', trigger: 'blur' },
    ],
    customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
    phone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    user_id: [{ required: true, message: '请选择负责人', trigger: 'change' }],

    // ===== 地址信息验证 =====
    // 省市区和详细地址已移除非空验证

    // ===== 企业信息验证 =====
    // 证件类型、证件号码、法定代表人已移除非空验证

    // ===== 会员信息验证 =====
    member_end_time: [
      {
        validator: (rule: any, value: any, callback: any) => {
          const start = form.value.member_start_time
          const end = value
          if (statusService.isMemberStatus(Number(form.value.customer_status)) && start && end) {
            if (end <= start) {
              callback(new Error('服务结束时间必须大于开始时间'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
    main_account_id: [
      {
        validator: (rule: any, value: any, callback: any) => {
          if (form.value.is_main_account === 0 && !value) {
            callback(new Error('请选择主账号客户'))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
  }
  // 处理表单变化
  const handleFormChange = ({ field, value }: { field: string; value: any }) => {
    console.log('表单字段变化:', field, value)
    form.value[field] = value
  }

  // 获取客户详情
  const getCustomerDetail = async () => {
    if (!props.customerId) return

    loading.value = true
    try {
      const res = await customerApi.detail(props.customerId)
      if (res.data) {
        // 填充表单数据
        Object.assign(form.value, res.data)

        // 解析标签
        if (res.data.customer_tags) {
          try {
            form.value.customer_tags = JSON.parse(res.data.customer_tags)
          } catch {
            form.value.customer_tags = []
          }
        }

        // 存储详情数据用于统计信息展示
        detailData.value = res.data
      }
    } catch (error: any) {
      console.error('获取客户详情失败:', error)
      ElMessage.error('获取客户详情失败')
    } finally {
      loading.value = false
    }
  }

  // 重置表单
  const resetForm = () => {
    form.value = {
      // 基础信息
      name: '',
      customer_type: 2,
      phone: '',
      user_id: 0,
      department_id: 0,
      source: '',
      level: 1,
      important_level: 1,
      status: 1,

      // 地址信息
      province: '',
      city: '',
      district: '',
      address: '',

      // 联系人信息
      contact_name: '',
      contact_phone: '',
      email: '',

      // 企业信息
      legal_person: '',
      id_type: null,
      id_number: '',
      industry: '',
      scale: '',

      // 会员信息
      customer_attribute: 1,
      customer_status: 0,
      member_type: null,
      member_start_time: null,
      member_end_time: null,
      is_main_account: null,
      main_account_id: null,

      // 营销信息
      is_cooperation: 0,
      cooperation_time: 0,

      // 扩展信息
      customer_tags: [],
      next_followup_plan: '',
      remark: '',
      lost_reason: '',
    }

    // 重置验证
    formRef.value?.clearValidate()
  }

  // 提交表单
  const handleSubmit = async () => {
    try {
      // 表单验证
      await formRef.value.validate()

      submitting.value = true

      // 构建提交数据
      const submitData: any = {
        ...form.value,
        customer_tags: JSON.stringify(form.value.customer_tags || []),
      }

      // 调用API
      if (props.customerId) {
        // 编辑
        submitData.id = props.customerId
        await customerApi.update(submitData)
        ElMessage.success('客户更新成功')
      } else {
        // 新增
        await customerApi.add(submitData)
        ElMessage.success('客户创建成功')
      }

      // 关闭弹窗并刷新列表
      visible.value = false
      emit('success')
    } catch (error) {
      if (error !== 'cancel') {
        console.error('表单提交失败:', error)
        ElMessage.error('提交失败，请检查表单信息')
      }
    } finally {
      submitting.value = false
    }
  }

  // 监听弹窗打开
  watch(
    () => visible.value,
    val => {
      if (val) {
        if (props.customerId) {
          // 编辑模式，加载客户详情
          getCustomerDetail()
        } else {
          // 新增模式，重置表单
          resetForm()
        }
      }
    }
  )
</script>

<style scoped>
  .customer-form {
    padding-bottom: 20px;
  }

  .form-section {
    margin-bottom: 20px;
  }

  .sidebar-card {
    position: sticky;
    top: 20px;
  }
</style>
